<template>
  <uni-swiper-dot
    :info="props.swiperList"
    :current="currentIndex"
    :field="props.filed"
    :mode="props.mode"
    :dotsStyles="dotsStyles"
    @clickItem="(e) => getCurrentIndex(e, 'click')"
  >
    <swiper
      class="swiper"
      :current="currentIndex"
      :autoplay="props.autoplay"
      :interval="props.interval"
      :duration="props.duration"
      @change="(e) => getCurrentIndex(e, 'change')"
    >
      <swiper-item v-for="(item, index) in props.swiperList" :key="index">
        <view class="swiper-item" @tap="goDetail(item)">
          <image class="img" :src="item[props.filed]" mode="scaleToFill"/>
        </view>
      </swiper-item>
    </swiper>
  </uni-swiper-dot>
</template>

<script setup>
import { reactive, ref } from 'vue'
 
/**
 * 参数名              类型             描述
 * swiperList        Array         swiper列表数据
 * isClick           Boolean       是否可以点击轮播图
 * filed             String        接口中存储轮播图的字段
 * mode              String        指示点类型  可选：default 、round 、nav 、 indexes
 * autoplay          Boolean       是否自动切换
 * interval          Number        轮播图自动切换间隔时间
 * duration          Number        滑动动画时长
*/
const props = defineProps({
  swiperList: {
    type: Array,
    default: () => []
  },
  isClick: {
    type: Boolean,
    default: () => true
  },
  filed: {
    type: String,
     default: () => ''
  },
  mode: {
    type: String,
    default: () => 'round'
  },
  autoplay: {
    type: Boolean,
    default: () => true
  },
  interval: {
    type: Number,
    default: () => 5000
  },
  duration: {
    type: Number,
    default: () => 500
  }
})
 
const currentIndex = ref(0)
 
const dotsStyles = reactive({
  border: 'none',
  backgroundColor: '#2a77ff',
  selectedBackgroundColor: '#2a77ff',
  selectedBorder: 'none',
})
 
//点击轮播图指示点展示对应图片
const getCurrentIndex = (e, type) => {
  currentIndex.value = type === 'click' ? e : e.detail.current;
}
 
//点击轮播图跳转页面
const goDetail = (item) => {
  if (props.isClick) {
    uni.navigateTo({
      url: `/pages/detail/index?params=${encodeURIComponent(JSON.stringify(item))}`
    })
  }
}
 
</script>